<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: [LCS]Kian_void
 * @LastEditTime: 2022-06-29 17:11:33
-->
<template>
  <div class="Hospital">
    <!-- 顶部背景区域 --> 
    <div class="topBg">
      <!-- 小图标 -->
     <div class="icon">
      <img src="../assets/1sheng.png" alt="" style="width:40px">
      </div>
      <!-- 标题 -->
      <div class="title">医疗救治定点医院和发热门诊一览</div>
    </div>
    <!-- 搜索区域 -->
    <div class="searchArea">
      <el-input placeholder="请输入内容" v-model="hosName" clearable style="width:250px;"> </el-input>
       <el-button type="primary" @click="getHosData2" round class="searchBt">搜索</el-button>
    </div>
    <!-- 医院列表展示 -->
    <div class="hosList" v-for="item in hosData" :key="item.id" @click="toMap(item)">
      <!-- 医院信息展示 -->
      <div class="hosInfo" >
        <!-- 名称 -->
      <div class="name">
        {{item.name}}
      </div>
        <!-- 描述 -->
        <div class="desc"><span>{{item.flags}}</span></div>
        <!-- 地址 -->
        <div class="address">{{item.address}}</div>
      </div>
      <!-- 定位距离展示部分 -->
      <div class="disLocation">
        <!-- 小图标 -->
        <div class="icons">
        <img src="../assets/dw.png" alt="" style="width:20px">
        </div>
        <!-- 距离 -->
        <div class="dis" v-if="item.distance!=null">{{item.distance}}km</div>
       <div class="dis iconfont el-icon-loading" v-else></div>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
    
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="pageSize" 
       :page-sizes="[5, 10, 15]"
      layout="total, sizes,prev, pager, next, jumper"
      :total="total">
    </el-pagination>
   
  </div>
</template>

<script>
import {get} from "@/utils/request"
export default {
  data() {
    return {
     
      hosName:'',
      page:1,
      pageSize:5,
      total:10,
      hosData:[]
    }
  },
  created() {
    this.getHosData();
    this.getll();
  },
  methods: {
    //获取当前定位的经纬度
    getll() {
      //将this的执行进行一个保存(嵌套函数中的dis......)
     let that = this;
      AMap.plugin('AMap.Geolocation', function() {
  var geolocation = new AMap.Geolocation({
    // 是否使用高精度定位，默认：true
    enableHighAccuracy: true,
    // 设置定位超时时间，默认：无穷大
    timeout: 10000,
    // 定位按钮的停靠位置的偏移量
    offset: [10, 20],
    //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    zoomToAccuracy: true,     
    //  定位按钮的排放位置,  RB表示右下
    position: 'RB'
  })

  geolocation.getCurrentPosition(function(status,result){
        if(status=='complete'){
            onComplete(result)
        }else{
            onError(result)
        }
  });

  function onComplete (data) {
    // data是具体的定位信息
    console.log(data)
    let longitude = data.position.lng;
    let latitude = data.position.lat;
    
  
    that.hosData.map(item => {
      //当前经纬度
      let p1 = [longitude,latitude]
      //医院经纬度
      let p2 = [item.longitude,item.latitude]
      //根据两个位置经纬度计算距离
      var dis = AMap.GeometryUtil.distance(p1, p2);
      console.log(dis)
      //@set(目标对象，要添加的属性名，要添加的属性值)
      that.$set(item, 'distance', (dis /1000).toFixed(2))
    })
  }

  function onError (data) {
    // 定位出错
    console.log(data)

  }
})
    },

       handleSizeChange(val) {
        this.pageSize = val;
        this. getll()
        this.getHosData()
      },
     handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        //获取用户点击分页后的页码
        this.page = val
        //调用获取医院信息方法
        this. getll()

        this.getHosData()
       
      },
      
     
      async getHosData2()  {
      
      let params = {
        page:1,
        pageSize:this.pageSize,
        name:this.hosName
      }
      //发送请求
      let res = await get('/hospital/pageQuery',params)
      this. getll()
      // console.log(res.data);
      this.hosData = res.data.list;
      // this.page = res.data.page;
      this.pageSize = res.data.pageSize;
      this.total = res.data.total;
       
    },

    //获取医院相关信息
    async getHosData() {
      
      let params = {
        page:this.page,
        pageSize:this.pageSize,
        name:this.hosName
      }
      //发送请求
      let res = await get('/hospital/pageQuery',params)
      this. getll()
      // console.log(res.data);
      this.hosData = res.data.list;
      // this.page = res.data.page;
      this.pageSize = res.data.pageSize;
      this.total = res.data.total;
       
    },

  
       //跳转到地图
    toMap(item) {
      this.$router.push({
        path:'/Hospital/map',
         query:item
      })
     
    },
  },
};
</script>

<style scoped>
/* 顶部背景 */
.topBg {
  /* 设置背景图片 */
  width: 100%;
  height: 150px;
  background-image: url("../assets/bg1.png");
  border-radius: 8px;
  
}
.topBg .icon{
   margin-left: 20px;
  color: #fff;
 padding-top: 20px;
 
}
.topBg .title {
  margin-top: 5px;
  margin-left: 20px;
  color: #fff;
  font-size: 25px;
  font-weight: bold;
  
  
}
.searchArea{
  display: flex;
  margin-top: 10px;
}
.searchArea .searchBt{
    margin-left: 10px;
}
/* 设置医院信息区域的样式 */
.hosList{
  margin-top: 20px;
  display: flex;
  border-bottom: 1px solid #F5F5F5;
  /* background-color: red; */
}
/* 医院信息区域样式 */
.hosList .hosInfo{
  flex: 1;
  /* background-color: aqua; */
}
/* 医院名称 */
.hosList .hosInfo .name{
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}
/* 医院描述 */
.hosList .hosInfo .desc{
 
  /* 切换该标签显示模式 */
  display: inline-block;
  
}
span{
   color: #fff;
  background-color: #FCB14D;
  border-radius: 5px;
  padding:0.1em 1em;
}

/* 医院地址 */
.hosList .hosInfo .address{
  color: #CCC;
}
.hosList .disLocation .icons{
  text-align: center;
}
.hosList .disLocation .dis{
  /* margin-top: 20px; */
  line-height: 50px;
  text-align: center;
}
</style>
